<template>
  <div>
    <!-- 添加表单验证功能:
      form需要:model="ruleForm",:rules="rules",ref="formRef"属性 
      from-item需要prop属性-->
    <el-form
      v-loading="loading"
      :model="skuParams"
      :rules="rules"
      ref="formRef"
      label-width="100"
      label-position="right"
    >
      <el-form-item prop="skuName" label="SKU名称">
        <el-input v-model="skuParams.skuName" placeholder="请输入SKU名称" />
      </el-form-item>
      <el-form-item prop="price" label="价格(元)">
        <el-input-number
          v-model.number="skuParams.price"
          style="width: 20%"
          :min="0"
          :step="100"
          controls-position="right"
          placeholder="请输入价格"
        />
      </el-form-item>
      <el-form-item prop="weight" label="重量(克)">
        <el-input-number
          v-model="skuParams.weight"
          style="width: 20%"
          :min="0"
          :step="100"
          controls-position="right"
          placeholder="请输入重量"
        />
      </el-form-item>
      <el-form-item label="SKU描述">
        <el-input
          v-model="skuParams.skuDesc"
          type="textarea"
          placeholder="请输SKU描述信息"
        ></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form label-width="80" label-position="right" inline>
          <el-form-item
            v-for="attr in attrArr"
            :key="attr.id"
            :label="attr.attrName"
            style="width: 230px; margin-bottom: 10px"
          >
            <!-- 先将属性id和属性值id以attr.is:attrValue.id形式收集到平台属性对象上 -->
            <el-select v-model="attr.attrIdAndValueId" placeholder="请选择">
              <el-option
                v-for="attrValue in attr.attrValueList"
                :key="attrValue.id"
                :label="attrValue.valueName"
                :value="`${attr.id}:${attrValue.id}`"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form inline>
          <el-form-item
            v-for="attr in saleArr"
            :key="attr.id"
            :label="attr.saleAttrName"
            style="width: 230px"
          >
            <!-- 先将属性id和属性值id以attr.is:attrValue.id形式收集到销售属性对象上 -->
            <el-select v-model="attr.saleIdAndValueID" placeholder="请选择">
              <el-option
                v-for="attrValue in attr.spuSaleAttrValueList"
                :label="attrValue.saleAttrValueName"
                :value="`${attr.id}:${attrValue.id}`"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item prop="skuDefaultImg" label="图片名称">
        <el-table
          border
          ref="tableRef"
          :data="imgArr"
          stripe
          style="margin: 10px 0"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="图片" align="center">
            <template #default="{ row }">
              <img :src="row.imgUrl" style="width: 150px" alt="手机图片" />
            </template>
          </el-table-column>
          <el-table-column label="名称" align="center">
            <template #default="{ row }">
              {{
                row.imgName != null
                  ? row.imgName.slice(0, row.imgName.length - 4)
                  : '无'
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button
                v-show="!row.checked"
                type="primary"
                @click="checked(row)"
              >
                设为默认图片
              </el-button>
              <el-button
                v-show="row.checked"
                type="success"
                @click="unchecked(row)"
              >
                已设为默认图片
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-column style="margin-left: 70px">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-column>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="SkuForm">
import { reqAttr } from '@/api/product/attr'
import {
  reqAddSku,
  reqSpuImageList,
  reqSpuSaleAttrList,
} from '@/api/product/spu'
import { SkuData, SpuData } from '@/api/product/spu/type'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'

// 获取父组件绑定的自定义事件名
let emit = defineEmits(['change-scene'])
// 控制是否显示加载动画
let loading = ref(false)
// 存储平台属性列表
let attrArr = ref<any>([])
// 存储当前spu的销售属性列表
let saleArr = ref<any>([])
// 存储当前spu的照片列表
let imgArr = ref<any>([])
// 获取table组件的实例对象 使用table组件实例对象暴露的方法来控制checkbox
let tableRef = ref()
// 获取form组件的实例对象 进行表单验证功能
let formRef = ref()
// 收集SKU的数据
let skuParams = reactive<SkuData>({
  category3Id: null, // 三级分类的id
  spuId: null, // 已有的SPU的id
  tmId: null, // SPU品牌id
  weight: null, // sku重量
  price: null, // sku价格
  skuName: '', // sku名称
  skuDesc: '', // sku描述
  skuDefaultImg: '', // 默认售卖商品的图片地址
  // 已选平台属性列表
  skuAttrValueList: [],
  // 已选的销售属性列表
  skuSaleAttrValueList: [],
})

// 初始化子组件中的数据(发请求获取数据)并获取父组件传递的数据
const initSkuData = async (row: SpuData, c1Id: number, c2Id: number) => {
  // 显示加载动画
  loading.value = true
  // 清空上次收集的全部数据
  Object.assign(skuParams, {
    category3Id: null, // 三级分类的id
    spuId: null, // 已有的SPU的id
    tmId: null, // SPU品牌id
    weight: null, // sku重量
    price: null, // sku价格
    skuName: '', // sku名称
    skuDesc: '', // sku描述
    skuDefaultImg: '', // 默认售卖商品的图片地址
    // 已选平台属性列表
    skuAttrValueList: [],
    // 已选的销售属性列表
    skuSaleAttrValueList: [],
  })
  // 获取平台属性列表的数据
  const result = await reqAttr(c1Id, c2Id, row.category3Id as number)
  // 获取当前spu的销售属性
  const result1 = await reqSpuSaleAttrList(row.id as number)
  // 获取当前spu的照片墙数据
  const result2 = await reqSpuImageList(row.id as number)
  if (result.code === 200 && result1.code === 200 && result2.code === 200) {
    // 存储获取的数据
    attrArr.value = result.data
    saleArr.value = result1.data
    imgArr.value = result2.data
    // 收集三级分类id,tmId和spu的id
    skuParams.category3Id = row.category3Id as number
    skuParams.spuId = row.id as number
    skuParams.tmId = row.tmId as number
    // 取消加载
    loading.value = false
  } else {
    ElMessage.error('获取数据失败')
  }
}
// 点击设置为默认售卖商品按钮的回调,选中该商品切换按钮为选中状态
const checked = (row: any) => {
  // 只能有一个默认售卖的商品
  // 点击时，全部的复选框取消选中
  tableRef.value.clearSelection()
  // 修改全部按钮为为选中状态
  imgArr.value.forEach((item: any) => {
    item.checked = false
  })
  // 勾选复选框  使用table组件实例对象的toggleRowSelection方法
  tableRef.value.toggleRowSelection(row, true)
  // 为row(照片对象)添加一个属性表示是否选中为默认售卖商品,用于切换按钮是否为选中状态
  row.checked = true
  // 收集默认售卖商品图片地址
  skuParams.skuDefaultImg = row.imgUrl
}
// 点击已设为默认售卖商品默认图片按钮的回调
const unchecked = (row: any) => {
  // 取消勾选复选框  使用table组件实例对象的toggleRowSelection方法
  tableRef.value.toggleRowSelection(row, false)
  // 切换按钮状态为未选中
  row.checked = false
  // 清空收集默认售卖商品图片地址
  skuParams.skuDefaultImg = ''
}
// 取消按钮的回调
const cancel = () => {
  // 触发父组件绑定的自定义事件并传递参数
  emit('change-scene', { flag: 0, params: '' })
}
// 保存按钮的回调
const save = async () => {
  // 整理收集到的平台属性数据
  // 方法一：map+filter
  const attrData = attrArr.value.map((item: any) => {
    if (item.attrIdAndValueId) {
      const [attrId, valueId] = item.attrIdAndValueId.split(':')
      return {
        attrId,
        valueId,
      }
    }
  })
  skuParams.skuAttrValueList = attrData.filter((item: any) => {
    return item
  })
  // 整理收集到的销售属性数据
  // 方法二：reduce
  skuParams.skuSaleAttrValueList = saleArr.value.reduce(
    (pre: any, next: any) => {
      if (next.saleIdAndValueID) {
        const [saleAttrId, saleAttrValueId] = next.saleIdAndValueID.split(':')
        pre.push({
          saleAttrId,
          saleAttrValueId,
        })
      }
      return pre
    },
    [],
  )
  // 表单验证
  await formRef.value.validate() // 等待表单验证成功再发请求
  // 发请求
  const result = await reqAddSku(skuParams)
  // 判断是否添加成功
  if (result.code === 200) {
    ElMessage.success('SKU添加成功')
    // 触发父组件绑定到的自定义事件切换到场景0
    emit('change-scene', { flag: 0, params: '' })
  } else {
    ElMessage.error('SKU添加失败')
  }
}
// 表单验证规则
const rules = reactive({
  skuName: [{ required: true, message: '请输入SKU名称', trigger: 'blur' }],
  skuDefaultImg: [
    { required: true, message: '请选择一个默认商品图片', trigger: 'blur' },
  ],
  price: [{ required: true, message: '请输入SKU价格', trigger: 'blur' }],
  weight: [{ required: true, message: '请输入SKU重量', trigger: 'blur' }],
})
// 暴露初始化获取数据的方法,供父组件在点击添加sku按钮时调用
defineExpose({ initSkuData })
</script>

<style scoped></style>
